<template>
  <div class="loginBox">
    <el-row>
      <el-col :span="12" :xs="0" />
      <el-col :span="12" :xs="24">
        <div class="loginInput">
          <h1>hello</h1>
          <h2>欢迎来到硅谷甄选</h2>
          <el-form
            :model="loginInfo"
            :rules="rules"
            style="max-width: 600px"
            class="loginForm"
            ref="loginForms"
          >
            <el-form-item prop="username">
              <el-input :prefix-icon="User" v-model="loginInfo.username" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                :prefix-icon="Lock"
                v-model="loginInfo.password"
                show-password
              />
            </el-form-item>
            <el-form-item class="button">
              <el-button :loading="loading" @click="login()">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElNotification, FormRules } from "element-plus";

import { useRouter } from "vue-router";
// 引入时间组件
import { timeSend } from "@/utils/time";
// 引入小仓库
import userStore from "@/store/modules/user";
// 定义初始loading
let loading = ref(false);
// 接收小仓库
let useStore = userStore();
// 获取路由器
let $router = useRouter();
//获取el-form组件
let loginForms = ref();
import { User, Lock } from "@element-plus/icons-vue";
const loginInfo = reactive({
  username: "",
  password: "",
});
const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 5, max:10,message: "账号长度至少五至十位数之间", trigger: "blur" },
  ],
  password: [
    { min: 6, max:10,message: "密码长度六至十位数之间", trigger: "blur" },
    { required: true, message: "请输入密码", trigger: "blur" },
  ],
};
// 点击登录方法
const login = async () => {
  await loginForms.value.validate();
  loading.value = true;
  // 可以用.then的方式
  try {
    await useStore.userLogin(loginInfo);
    $router.push("/");
    ElNotification({
      type: "success",
      message: "欢迎回来",
      title: `${timeSend()}好`,
    });
    loading.value = false;
  } catch (error) {
    // console.log(error,'error');
    ElNotification({
      type: "error",
      message: "登录失败",
      // message: (error as Error).message   //直接显示后台提示失败内容
    });
    loading.value = false;
  }
};
</script>

<style scoped lang="scss">
.loginBox {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/background.jpg") no-repeat;
  background-size: cover; //背景图全覆盖
  .loginInput {
    position: relative;
    width: 80%;
    top: 30vh;
    background: url("@/assets/images/login_form.png") no-repeat;
    background-size: cover; //背景图全覆盖
    padding: 30px 20px;
    h1,
    h2 {
      color: white;
    }
    h1 {
      font-size: 34px;
    }
    h2 {
      font-size: 18px;
      padding: 20px 0;
    }
    .button {
      .el-form-item__content button {
        width: 100%;
      }
    }
  }
}
</style>
